<template>
<div style="z-index:7;left: 0;top: 0;position: fixed;height: 100%;width: 100%;background-color:white;">
    <img src="../../../../assets/changepsw/back.png" class="img_back" @click="goinfo">
    <div class="div1">
        <span>身份验证</span>
    </div>
    <div style="margin-left:22px;margin-right:22px;margin-top:20px">
        <div>
            <span class="span1">输入{{email?'邮箱':'短信'}}验证码</span>
        </div>
        <div style="font-size:13px;margin-top:5px">
            <span>已向 </span>
            <span style="color: rgb(255, 121, 37);" v-if="!email">
                +86 {{this.phone.slice(0,3)}}******{{this.phone.slice(9,11)}}
            </span>
            <ImgIconSend class="img_iconSend" v-if="email"></ImgIconSend>
            <span style="color: rgb(255, 121, 37);margin-left:22px" v-if="email">
                {{email.slice(0,2)}}******{{email.slice(email.length-8)}}
            </span>
                <span> 发送验证码</span>
        </div>
        <div style="margin-top:40px;border-bottom: 0.7px solid rgb(215, 215, 215, 0.7);">
            <span style="font-size:18px">验证码</span>
            <input type="text" placeholder="请输入验证码" class="input" v-model="code" @focus="InputFocus(0)" @blur="InputBlur">
            <img src="../../../../assets/changepsw/false.png" class="img_false" v-show="code" @click="deleteCode">
        </div>
        <div class="div33" :style="WhichInput==0?InputStyle[0]+MyDiv33Width:InputStyle[1]+'width:0px'"></div>
        <div style="margin-top:15px">
            <span class="span2" @click="reSend" :style="reSendStatus?'color: rgb(125, 125, 125);':''">重新发送</span>
            <span style="font-size:14px;color: rgb(125, 125, 125);" v-show="reSendStatus"> ({{reSendnum}})</span>
        </div>
        <div class="div2" :style="code?'':'background-color: rgb(255, 206, 236);'" @click="next">
            <span>提交</span>
        </div>
    </div>
    <div class="div3" v-show="ErrorMessage" :style="ErrorPosition+ErrorPosition2">
        <img src="../../../../assets/changepsw/error.png" class="img_error">
        <span style="margin-left:15px">验证码错误，请重新输入。</span>
    </div>
</div>
</template>

<script>
import ImgIconSend from './img/email/img_iconSend.vue'
export default {
    name:'checkCode',
    components:{ImgIconSend},
    data(){
        return{
            code:'',
            ErrorMessage:0,
            ErrorPosition:'',
            ErrorPosition2:'',
            reSendnum:60,
            reSendStatus:0,
            username:'',
            phone:'',
            email:'841383905@qq.com',
            WhichInput:99,
            InputStyle:['border-bottom: 0.7px solid rgb(255, 113, 236);','border-bottom: 0.7px solid rgb(229, 229, 229);'],
            MyDiv33Width:'',
        }
    },
    methods:{
        deleteCode(){
            this.code=''
        },
        goinfo(){this.$router.replace({name:'infoshow'})},
        reSend(){
            if(this.reSendStatus != 1){
                if(!this.email){
                    this.$addr.get(`sms/${this.username}/${this.phone}/1332081/send`).then(
                        response=>{
                            console.log('发送验证码请求成功',response.data);
                            if(response.data.state == 4001){
                                this.$router.replace({name:'login',params:{'username':this.username}})
                            }else{
                                this.reSendStatus=1
                                this.code=''
                                this.$message({
                                    message:'已经发送验证码，请注意查收',
                                    type:'success'
                                })
                            }
                        },error=>{
                            this.$message({
                                message:'发送验证码请求失败，请重新登陆',
                                type:'error'
                            })
                            console.log("发送验证码请求失败",error.message);
                            //this.$router.replace({name:'login'})
                        }
                    )
                }else{
                    this.$addr.get(`email/send`,{
                        params:{
                            email:this.email
                        }
                    }).then(
                        response=>{
                            console.log('发送验证码请求成功',response.data);
                            if(response.data.state == 4001){
                                this.$router.replace({name:'login',params:{'username':this.username}})
                            }else{
                                this.reSendStatus=1
                                this.code=''
                                this.$message({
                                    message:'已经发送验证码，请注意查收',
                                    type:'success'
                                })
                            }
                        },error=>{
                            this.$message({
                                message:'发送验证码请求失败，请重新登陆',
                                type:'error'
                            })
                            console.log("发送验证码请求失败",error.message);
                            //this.$router.replace({name:'login'})
                        }
                    )
                }

            }
        },
        next(){
            if(!this.email){
                if(this.username=='' || this.phone == ''){
                    this.$message({
                        message:'用户登陆异常，请重新登陆',
                        type:'error'
                    })
                    //this.$router.replace({name:'login'})
                }else{
                    this.$addr.get(`sms/${this.username}/${this.phone}/${this.code}/check`).then(
                        response=>{
                            console.log('核对验证码请求成功',response.data);
                            if(response.data.state == 4001){
                                this.$router.replace({name:'login',params:{'username':this.username}})
                            }else if(response.data.state == 7000){
                                this.ErrorMessage=1
                            }else{
                                this.$notify({
                                    title: '恭喜您',
                                    message: '绑定新号码成功',
                                    type: 'success'
                                });
                                this.$router.replace({name:'infoshow'})
                            }
                        },error=>{
                            this.$message({
                                message:'核对验证码请求失败，请重新登陆',
                                type:'error'
                            })
                            console.log("核对验证码请求失败",error.message);
                            //this.$router.replace({name:'login'})
                        }
                    )
                }
            }else{
                this.$addr.get(`email/check`,{
                    params:{
                        email:this.email,
                        CheckNum:this.code
                    }
                }).then(
                    response=>{
                        console.log('核对验证码请求成功',response.data);
                        if(response.data.state == 4001){
                            this.$router.replace({name:'login',params:{'username':this.username}})
                        }else if(response.data.state == 7000){
                            this.ErrorMessage=1
                        }else{
                            this.$notify({
                                title: '恭喜您',
                                message: '绑定新邮箱成功',
                                type: 'success'
                            });
                            this.$router.replace({name:'infoshow'})
                        }
                    },error=>{
                        this.$message({
                            message:'核对验证码请求失败，请重新登陆',
                            type:'error'
                        })
                        console.log("核对验证码请求失败",error.message);
                        //this.$router.replace({name:'login'})
                    }
                )
            }
        },
        InputFocus(index){
            this.WhichInput=index
        },
        InputBlur(){
            this.WhichInput=99
        }
    },
    watch:{
        ErrorMessage(value){
            if(value == 1){
                let num = -295
                let ok = 0
                var id = setInterval(() => {
                    this.ErrorPosition='margin-top:'+num+'px'
                    // console.log(this.ErrorPosition,'@');
                    if(num < -315){
                        ok = 1
                        num++
                    }else if(ok){
                        if(num > -310){
                            clearInterval(id);
                        }else{
                            num++
                        }
                    }else{
                        num--
                    }
                }, 3);
                var id3 = setTimeout(() => {
                    let num2=1
                    var id2 = setInterval(() => {
                        //下面的分号非常细节
                        this.ErrorPosition2=';opacity:'+num2
                        // console.log(this.ErrorPosition2,'%');
                        if(num2 < 0.05){
                            clearInterval(id2)
                            clearTimeout(id3)
                            this.ErrorMessage=0
                            this.ErrorPosition=this.ErrorPosition2=''
                        }else{
                            num2-=0.05
                        }
                    }, 15);
                }, 1000);
            }
        },
        reSendStatus(value){
            if(value == 1){
                this.reSendnum=60
                var id3 = setInterval(() => {
                    this.reSendnum--
                    if(this.reSendnum < 1){
                        this.reSendStatus=!this.reSendStatus
                        clearInterval(id3)
                    }
                }, 100);
            }
        },
        code(value){
            if(value.length > 6){
                this.code=value.slice(0,6)
            }
            // console.log(value);
        }
    },
    mounted(){
        this.MyDiv33Width='width:'+(window.innerWidth-44)+'px;'
        this.$message({
            message:'已经发送验证码，请注意查收',
            type:'success'
        })
        this.reSendStatus=1
        if(this.$route.params.phone != null || this.$route.params.phone != ''){
            this.phone=this.$route.params.phone
        }
        if(this.$route.params.username != null || this.$route.params.username != ''){
            this.username=this.$route.params.username
        }
        if(this.$route.params.email != null || this.$route.params.email != ''){
            this.email=this.$route.params.email
        }
    },
}
</script>

<style scoped>
.div33{
    margin-top: -.7px;
    position: absolute;
    transition: border-bottom .5s ease-in-out,width .5s ease-out;
}
.img_iconSend{
    position: fixed;
    height: 16px;
    width: 16px;
    margin-top: 2px;
    margin-left: 2px;
}
.div1{
    background: linear-gradient(to right,rgb(255, 182, 238),rgb(255, 113, 236));
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 23px;
    padding-bottom: 15px;
    user-select: none;
}
.span1{
    font-size: 28px;
    font-weight: 500;
}
.input{
    font-size: 16px;
    padding: 10px;
    height: 20px;
    border-style: none;
    outline: none;
    margin-left: 15px;
    width: 180px;
    margin-bottom: 1px;
}
input::-webkit-input-placeholder{
    color: rgb(174, 174, 174);
}
.img_back{
    position: absolute;
    margin-top: 28px;
    left: 14px;
    height: 18px;
}
.img_false{
    position: absolute;
    height: 15px;
    margin-top: 14px;
    margin-left: -25px;
}
.span2{
    font-size: 14px;
    color: rgb(40, 144, 255);
}
.div2{
    margin-top: 40px;
    background-color: rgb(255, 150, 215);
    font-size: 18px;
    color: white;
    margin-left: -10px;
    margin-right: -10px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}
.div3{
    position: absolute;
    width: 94%;
    font-size: 18px;
    text-align: center;
    padding-bottom: 15px;
    padding-top: 15px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0px 1px 5px 1px rgb(212, 212, 212) ;
    /* margin-top: -310px; */
    margin-top: -294px;
}
.img_error{
    height: 26px;
    position: absolute;
    margin-left: -15px;
    margin-top: 1px;
}
</style>